<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>我是div</div>
			<button type="button">点击移除div事件</button>
			<input type="text" name="" id="" value="" />
		</div>
		<script type="text/javascript">
			var box = document.querySelector(".box");
			var div = document.querySelector(".box>div");
			// var click_fn = function(){
			// 	console.log(1);
			// }
			
			box.addEventListener("click",click_db)
			
			function click_db(){
				div.addEventListener("click",function(e){
					if(e.target.nodeType == 1){
						div.style.backgroundColor = `
						rgb(
						${Math.floor(Math.random()*256)},
						${Math.floor(Math.random()*256)},
						${Math.floor(Math.random()*256)}
						)
						`
						
					}
				})
				box.removeEventListener("click",click_db)
			}
			
			/**
			 * 使用click模拟dbclick
			 * 在200ms之内连续点击两次视为一次点击
			 * 将div背景颜色随机改变rgb(0-255,0-255,0-255)
			 * [1,2,3,4,5,6,7,8,9,0,a,b,c,d,e,f]
			 */
			
			
			
			// console.log(div.nodeType);
			/**
			 * nodeType
			 * 存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点：
			 *	1	Element	元素名	null
				2	Attr	属性名称	属性值
				3	Text	#text	节点的内容
				4	CDATASection	#cdata-section	节点的内容
				5	EntityReference	实体引用名称	null
				6	Entity	实体名称	null
				7	ProcessingInstruction	target	节点的内容
				8	Comment	#comment	注释文本
				9	Document	#document	null
				10	DocumentType	文档类型名称	null
				11	DocumentFragment	#document 片段	null
				12	Notation	符号名称	null
			 */
			
			// document.querySelector("button").addEventListener("click",function(e){
			// 	// 事件对象要一致
			// 	// 触发事件动作要一致
			// 	// 执行动作的指针要一致
				
			// 	// div.removeEventListener("click",click_fn)
			// 	console.log(e.nodeType);
			// })
		</script>
	</body>
</html>
